import { Button, Cascader, Modal } from 'antd-mobile'
import { DemoBlock } from 'demos'
import React, { useState } from 'react'

const options = [
  {
    label: '江苏',
    value: '江苏',
    children: [
      {
        label: '南京',
        value: '南京',
        children: [
          {
            label: '玄武区',
            value: '玄武区',
          },
          {
            label: '秦淮区',
            value: '秦淮区',
          },
          {
            label: '建邺区',
            value: '建邺区',
          },
        ],
      },
      {
        label: '苏州',
        value: '苏州',
        children: [
          {
            label: '虎丘区',
            value: '虎丘区',
          },
          {
            label: '吴中区',
            value: '吴中区',
          },
          {
            label: '相城区',
            value: '相城区',
          },
        ],
      },
    ],
  },
]


// 基础用法
function BasicDemo() {
  const [visible, setVisible] = useState(false)

const [value, setValue] = useState<any>([
    [
        "江苏",
        "南京",
        "玄武区"
    ],

])
  return (
    <>
      <Button
        onClick={() => {
          setVisible(true)
        }}
      >
        选择
      </Button>
      <Cascader
        activeIconSetPath={true}
         multiple
         value={value}
         onConfirm={(e) => {
          console.log('onConfirm', e)
          setValue(e)
          Modal.alert({
            content: ` ${JSON.stringify(e.map((item) => item.join("/")),null,2)}`,
            onConfirm: () => {
              console.log('Confirmed')
            },
          })
          // setValue(e)
        }}

        options={options}
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </>
  )
}

// 渲染所选值


export default () => {
  return (
    <>
      <DemoBlock title='基础用法'>
        <BasicDemo />
      </DemoBlock>

    </>
  )
}